<template>
  <el-drawer
    v-model="visible"
    title="主题设置"
    direction="rtl"
  >
    <div class="theme-config">
      <div class="config-item">
        <span class="label">主题色</span>
        <el-color-picker
          v-model="config.primaryColor"
          show-alpha
        />
      </div>
      
      <div class="config-item">
        <span class="label">暗黑模式</span>
        <el-switch
          v-model="isDark"
          inline-prompt
          :active-icon="Moon"
          :inactive-icon="Sunny"
        />
      </div>
    </div>
  </el-drawer>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { storeToRefs } from 'pinia'
import { useThemeStore } from '@/stores/theme'
import { Moon, Sunny } from '@element-plus/icons-vue'

const visible = ref(false)
const store = useThemeStore()
const { config } = storeToRefs(store)

const isDark = computed({
  get: () => config.value.mode === 'dark',
  set: (val) => {
    config.value.mode = val ? 'dark' : 'light'
  }
})

defineExpose({
  open() {
    visible.value = true
  }
})
</script>

<style scoped lang="scss">
.theme-config {
  padding: 20px;
  
  .config-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    
    .label {
      font-size: 16px;
    }
  }
}
</style> 